﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>管理员列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="__STATIC__heiseshop_admin/style/adminStyle.css" rel="stylesheet" type="text/css" />
<script src="__STATIC__heiseshop_admin/js/jquery.js"></script>
<script src="__STATIC__heiseshop_admin/js/public.js"></script>
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/app.css">
<script src="__STATIC__heiseshop_admin/js/amazeui.min.js"></script>
</head>
<style>
  .am-fr a{
    color: black;
    background-color: black;
  }
  th{
    text-align: center;
  }
</style>
<body>
 <div class="wrap">
  <div class="page-title">
    
    <span class="modular fl"><i class="user"></i><em>管理员列表</em></span>
    <span class="modular fr"><a href="add_admin.html" class="pt-link-btn">+添加新管理员</a></span>
  </div>
  <div class="operate">
   <form>
    <input type="text" class="textBox length-long search" placeholder="输入管理员名称、手机号码..."/>
    <button class="tdBtn search_btn" type="button">查询</button>
   </form>
  </div>
  <table class="list-style Interlaced" style="text-align: center;">
   <tr>
     <th>编号</th>
     <th>年龄</th>
     <th>昵称</th>
     <th>管理员名称</th>
     <th>邮件地址</th>
     <th>手机号码</th>
     <th>是否验证</th>
     <th>注册日期</th>
     <th>操作</th>
   </tr>
   <tbody id="ajax-tbody">

   </tbody>

  </table>
  <!-- BatchOperation -->
  <div style="overflow:hidden;">
      <!-- Operation -->
	  <div class="BatchOperation fl">
	   <input type="checkbox" id="del"/>
	   <label for="del" class="btnStyle middle">全选</label>
	   <input type="button" value="批量删除" class="btnStyle piliang"/>
	  </div>
	  <!-- turn page -->
	<div class="am-u-lg-12 am-cf" style="width:83%">

        <div class="am-fr ajax-page">
            {$page}
        </div>
    </div>
  </div>
 </div>

</body>
</html>
<script src="__STATIC__heiseshop_admin/js/template.js"></script>
<script type="text/html" id="ajax-content">
    <%for (var i = 0; i<data.length; i++){%>
        <tr>
         <td>
          <input type="checkbox" value="<%=data[i].id%>" name="checkbox"/>
          <span class="middle"><%=data[i].id%></span>
         </td>
         <td class="center"><%=data[i].age%></td>
         <td class="center"><%=data[i].nickname%></td>
         <td class="center"><%=data[i].rolename%></td>
         <td class="center"><%=data[i].email%></td>
         <td class="center"><%=data[i].phone%></td>
         <td class="center"><img src="__STATIC__heiseshop_admin/images/yes.gif"/></td>
         <td class="center"><%=data[i].inputtime%></td>
         <td class="center">
          <a href="edit_admin.html?id=<%=data[i].id%>" class="inline-block" title="编辑"><img src="__STATIC__heiseshop_admin/images/icon_edit.gif"/></a>
          <a class="inline-block delete" data-id="<%=data[i].id%>" title="删除"><img src="__STATIC__heiseshop_admin/images/icon_drop.gif"/></a>
         </td>
        </tr>
    <%}%>
</script>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">是否删除</div>
        <span id="span" style="display:none"></span>
        <div class="am-modal-footer">
        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
        <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
<script>
$(function(){
      $('#ajax-tbody').on('click','.delete',function(){
          var id=$(this).data('id');
          $('#span').html(id);
          $('#my-confirm').modal({
              onConfirm: function(){
                  $.ajax({
                      data:'id='+$('#span').html(),
                      url:"{:url('admin_delete')}",
                      success:function(res){
                          ajax();
                      }
                  })
              }
          })
          return false;
      })
  })
function ajax (url) {
    var config = {
        success : function (res) { 
            tpl(res)
        }
    };
    if (url) {
        config.url = url;
    }else{
        config.data='page='+$('input[name=current_page]').val();
    }
    $.ajax(config);
}
ajax();

$('.ajax-page').on('click' , 'a' , function(){
    var _this = $(this);
    ajax(_this.attr('href'));
    return false;
});

function tpl(res){
    var html = template(document.getElementById('ajax-content').innerHTML , {'data':res.admin_list.data});
    $('#ajax-tbody').html(html);
    $('.ajax-page').html(res.page);
    $('.ajax-page').append('<input type="hidden" name="current_page" value="'+res.current_page+'">');        
}

$('.search_btn').click(function(){
    var search=$('.search').val();
    $.ajax({
        url : "{url('user_list')}",
        data:'search='+search,            
        success:function(res){
            tpl(res)    
        }
    })
})
$('.search').keydown(function(e){
    if(e.which==13){
        $('.search_btn').click();
        return false;
    }
})
$('#del').click(function(){
  if(this.checked){
      $('input[name="checkbox"]').each(function(){
          this.checked=true;
      })
  }else{
      $('input[name="checkbox"]').each(function(){
          this.checked=false;
      })
  }
})
$('.piliang').click(function(){
       $('#my-confirm').modal({
            onConfirm: function(){
              $('input[name="checkbox"]:checked').each(function(){
                var id=$(this).val();
                $.ajax({
                    data:'id='+id,
                    url:"{:url('admin_delete')}",
                    success:function(res){
                        ajax();
                        $("#del").removeAttr("checked");
                    }
                })
            })
        }
    })
})
</script>